<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            var arr=new Array();

            arr[0]=[new Option("---方向---",-1)];
            arr[1]=[new Option("图形计算",1),new Option("软件开发",2),new Option("数据库管理",3)];
            arr[2]=[new Option("商务英语",1),new Option("专业英语",2)];

            function change(index){
                var s2=document.getElementById("s2");

                s2.options.length=0;

                for (var i = 0; i < arr[index].length; i++) {
                    s2.options[i]=arr[index][i];
                }
            }


            function loadData(){
                var y=document.getElementById("y");
                var m=document.getElementById("m");

                for (var i = 1; i <= 12; i++) {
                    var monthOption=new Option(i+"月",i);
                    m.options[m.length]=monthOption;
                }

                var currYear=new Date().getFullYear();

                for (var i = currYear-5; i <= currYear+5 ; i++) {
                    var yearOption=new Option(i+"年",i);
                    y.options[y.length]=yearOption;
                }
            }


            function loadDay(){
                var y=document.getElementById("y");
                var m=document.getElementById("m");
                var d=document.getElementById("d");

                var year=y.options[y.selectedIndex].value;
                var month=m.options[m.selectedIndex].value;

                console.log(year+" "+month);

                if(year==-1||month==-1){
                    d.options.length=1;
                    return;
                }

                var day=new Date(year,month,1-1).getDate();

                console.log(day);

                if(d.length==1){
                    for (var i = 1; i <= 28; i++) {
                        var dayOption=new Option(i+"日",i);
                        d.options[d.length]=dayOption;
                    }
                }

                d.options.length=29;

                for (var i = 29; i <= day; i++) {
                    var dayOption=new Option(i+"日",i);
                    d.options[d.length]=dayOption;
                }
            }

        </script>
    </head>
    <body onload="loadData();">
        <select id="s1" onchange="change(this.selectedIndex);">
            <option value="-1">---专业---</option>
            <option value="1">计算机</option>
            <option value="2">英语</option>
        </select>

        <select id="s2">
            <option value="-1">---方向---</option>
        </select>


        <hr/>


        <!--
            当页面打开时年和月存在
            月1-12
            年当前年的前后5年
            日根据选择的年和月通过js生成
        -->

        <select id="y" onchange="loadDay();">
            <option value="-1">---年---</option>
        </select>

        <select id="m" onchange="loadDay();">
            <option value="-1">---月---</option>
        </select>

        <select id="d">
            <option value="-1">---日---</option>
        </select>

    </body>
</html>